<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="菜单名称">
      <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
    </el-form-item>
    <el-form-item label="菜单路由">
      <el-input v-model="form.node" placeholder="请输入菜单路由" />
    </el-form-item>
    <el-form-item label="是否页面菜单">
      <el-select
        v-model="form.isPage"
        class="m-2"
        placeholder="请选择菜单类别"
      >
        <el-option key="1" label="是" :value="1" />
        <el-option key="2" label="否" :value="0" />
      </el-select>
    </el-form-item>
    <el-form-item label="菜单状态">
      <el-select
        v-model="form.statu"
        class="m-2"
        placeholder="请选择菜单状态"
      >
        <el-option key="1" label="正常" :value="0" />
        <el-option key="2" label="冻结" :value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="菜单上级">
      <el-cascader
        v-model="form.preNodeID"
        :options="options"
        :props="CascaderProps"
        @change="handleChange"
        placeholder="请选择菜单上级"
      />
    </el-form-item>
  </el-form>
</template>
<script setup>
import { ref, reactive } from "vue";
import api from "@/api/menu";
const props = defineProps({
  menu: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const options = props.menu;
let form = reactive({
  menuName: "",
  node: "",
  isPage: "",
  statu: "",
  preNodeID: "",
});
const CascaderProps = {
  expandTrigger: "hover",
  emitPath: false,
  value: "id",
  label: "menuName",
  children: "child",
};
const handleChange = (value) => {
  console.log(value);
};
</script>
<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}
</style>
